<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="订单详情"
      :visible.sync="visible"
      width="1200px"
      height="600px"
    >
      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <!-- 描述列表1 -->
          <el-descriptions size="medium" style="margin-top: 20px;" :column="2">
            <el-descriptions-item label="订单编号">{{ detail.orderCode }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ detail.transactTime ? moment(detail.transactTime).format('YYYY-MM-DD HH:mm') : '' }}</el-descriptions-item>
            <el-descriptions-item label="责任机构">{{ detail.orgName }}</el-descriptions-item>
            <el-descriptions-item label="处理人">{{ detail.ownerName }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ detail.paymentMethod ? formatColumnMap(paymentMethodMap, 'value', detail.paymentMethod, 'desc') : '' }}</el-descriptions-item>
            <el-descriptions-item label="支付状态">{{ detail.payStatus ? formatColumnMap(payStatusMap, 'value', detail.payStatus, 'desc') : '未支付' }}</el-descriptions-item>
            <el-descriptions-item label="客户编号">{{ detail.csmCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ detail.csmName }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions size="medium" style="margin-top: -20px; margin-bottom: 50px;">
            <el-descriptions-item label="客户地址">{{ detail.csmAddress }}</el-descriptions-item>
          </el-descriptions>
          <div class="doneImg" :style="{backgroundImage: 'url(' + statusImg + ')'}" />
          <!-- 表格 -->
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :data="tableData.data"
            :column="tableData.column"
            :immediate-fetch="false"
            :pagination="false"
            :max-height="300"
            :summary-method="getSummaries"
            show-summary
          />
          <!--  -->
          <div class="settlement">
            <p class="total-txt">
              订单总额：{{ isNaN(Number(detail.decimalSpare4)) ? '' : Number(detail.decimalSpare4).toFixed(2) }}
              <el-tooltip
                class="item"
                effect="dark"
                content="按单位计费的商品下单时不计算商品费用，订单签收完成更新订单总额、应收金额、实收金额"
                placement="top-start"
              >
                <i class="el-icon-question" />
              </el-tooltip>
            </p>
            <span style="margin-right: 40px;">应收金额：{{ isNaN(Number(detail.treceivables)) ? '' : Number(detail.treceivables).toFixed(2) }}</span>
            <span>实收金额：{{ isNaN(Number(detail.taccReceivable)) ? '' : Number(detail.taccReceivable).toFixed(2) }}</span>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <span>流转信息：</span>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}')} ${item.contacter}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.facilityName ? item.facilityName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 关闭 </el-button>
        <!-- <el-button type="primary"> 转派 </el-button>
        <el-button type="primary"> 催单 </el-button>
        <el-button type="primary"> 签单 </el-button>
        <el-button type="primary"> 退货 </el-button> -->
      </div>
    </el-dialog></div>
</template>

<script>
  import { queryMap, queryOrderDetailData, queryOrderFlowInfo, querySpecAliasList } from '@/api'
  import moment from 'dayjs'
  import { formatColumnMap, formatFixed2 } from '@/utils'
  import { parseTime } from '@/utils'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    name: 'OrderDetails',
    data() {
      return {
        moment,
        formatColumnMap,
        parseTime,
        visible: false,
        payStatusMap: [],
        paymentMethodMap: [],
        detail: {
          orderStatus: ''
        },
        specList: [],
        flowInfoData: [], // 流转信息
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品名称',
              width: 120
            },
            {
              prop: 'gprince',
              align: 'right',
              label: '单价',
              formatter: row => formatFixed2(row.gprince)
            },
            {
              prop: 'gcount',
              align: 'right',
              label: '数量'
            },
            {
              prop: 'gprefPrice',
              align: 'right',
              label: '优惠金额',
              formatter: row => formatFixed2(row.gprefPrice)
            },
            {
              prop: 'netWeight',
              align: 'right',
              label: '净重',
              render: (h, { row }) => <span>{ row.netWeight ? row.netWeight : 0 }KG</span>
            },
            {
              prop: 'fee3',
              align: 'right',
              label: '回收气量',
              render: (h, { row }) => <span>{ row.fee3 ? row.fee3 : 0 }KG</span>
            },
            {
              prop: 'fee1',
              align: 'right',
              label: '远距配送费',
              formatter: row => formatFixed2(row.fee1)
            },
            {
              prop: 'fee2',
              align: 'right',
              label: '上楼费',
              formatter: row => formatFixed2(row.fee2)
            },
            {
              prop: 'tip',
              align: 'right',
              label: '服务费',
              formatter: row => formatFixed2(row.tip)
            }
          ],
          data: []
        }
      }
    },
    computed: {
      statusImg: function() {
        if (this.detail.orderStatus) return require(`@/assets/order_status/${this.detail.orderStatus}.png`)
        return ''
      }
    },
    created() {
      this.getGoodsSpecList()
      this.queryOptionsMap()
    },
    methods: {
      open(temp) {
        this.getDetailData(temp.orderCode)
        this.getFlowInfoData(temp.orderCode)
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDetailData(orderCode) {
        const res = await queryOrderDetailData({ orderCode })
        this.detail = res.data
        this.tableData.data = res.data.detailList
      },
      async getFlowInfoData(orderCode) {
        const res = await queryOrderFlowInfo({
          orderCode
        })
        this.flowInfoData = JSON.parse(res.data.traceList)
      },
      async getGoodsSpecList() {
        const res = await querySpecAliasList()
        this.specList = res.data
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }), mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' })])
        this.payStatusMap = res1.data // 支付状态
        this.paymentMethodMap = res2.data // 支付方式
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 1) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })
        sums[3] = Number(sums[3]).toFixed(2)
        sums[4] = sums[4] ? sums[4] + 'KG' : '0KG'
        sums[5] = sums[5] ? sums[5] + 'KG' : '0KG'
        sums[6] = Number(sums[6]).toFixed(2)
        sums[7] = Number(sums[7]).toFixed(2)
        sums[8] = Number(sums[8]).toFixed(2)
        return sums
      }
    }
  }
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;

  .left {
    position: relative;
    width: 600px;
    height: 100%;

    .doneImg {
      position: absolute;
      top: 80px;
      right: 80px;
      width: 61px;
      height: 61px;
      //background-image: url("../../../../assets/done2.png");
      background-size: 61px 61px;
    }

    .settlement {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #F54D28;
      text-align: right;
      p {
        margin-bottom: 8px;
      }
      .total-txt {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }
    }

    .el-table {
      margin-bottom: 20px;
    }

    .el-descriptions {
      margin-bottom: 20px;
    }

    img {
      width: 61px;
      height: 61px;
      margin-left: 80px;
    }
  }

  .right {
    height: 100%;
    margin-left: 15px;
    overflow-y: auto;
    flex: 1;

    span {
      display: block;
      height: 24px;
      padding-left: 20px;
      font-weight: 700;
      line-height: 24px;
      background-color: #e3e3e3;
    }

    .el-timeline {
      margin-top: 20px;
    }
  }
}
</style>
